<template >
    <div>
        <div class="search">
            <div>
                《
            </div>
            <div>
                <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />

            </div>
        </div>
        <div class="dpinfos">
            <div class="dpinfos-1">
                <div>
                    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
                <div>
                    <div>
                        1
                    </div>

                    <div>

                    </div>

                    <div>

                    </div>

                    <div>

                    </div>

                </div>
            </div>
        </div>
        <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items" height="100vh"
            @click-item="handekgetid"    @click-nav="handleNavClick">

        </van-tree-select>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const activeId = ref(1);
const activeIndex = ref(0);
const items = [
    {
        text: '浙江',
        id: 5,
        children: [
            { text: '杭州', id: 1 },
            { text: '温州', id: 2 },
            { text: '宁波', id: 3, disabled: true },
        ],
    },
    {
        text: '江苏',
        id: 10,
        children: [
            { text: '南京', id: 4 },
            { text: '无锡', id: 5 },
            { text: '徐州', id: 6 },
        ],
    },
    {
        text: '福建',
        id: 5,
    },
];
function handekgetid(val) {
    const clickedItemId = val.id;
    
    // 在 items 中查找具有 clickedItemId 的项
    const clickedItem = items.find(item => item.id === clickedItemId);
         console.log(clickedItem);
    // 如果找到了匹配的项，则打印父级的 id
    // if (clickedItem) {
    //     console.log('父级 id:', clickedItem.id);
    // }
}
function handleNavClick(index) {
    // 获取点击的导航项
    const clickedNavItem = items[index];

    // 打印父级的 id
    if (clickedNavItem) {
        console.log('父级 id:', clickedNavItem.id);
    }
}

</script>

<style lang="scss" scoped>
.bod {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.search {
    display: flex;
    align-items: center;
    width: 100%;
    // justify-content: space-;
    // justify-content: center;
}

.search>div:nth-of-type(1) {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search>div:nth-of-type(2) {
    width: 90%;
}

.dpinfos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 15rem;
    // border: 1px solid red;

}

.dpinfos-1 {
    width: 95%;
    height: 90%;
    display: flex;
    align-items: center;
    border: 1px solid red;

}

.dpinfos-1>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dpinfos-1>div:nth-of-type(1) {
    width: 40%;
    height: 100%;
    border: 1px solid red;

}

.dpinfos-1>div:nth-of-type(2) {
    width: 60%;
    height: 100%;
    border: 1px solid red;

}
</style>
